<script setup>
import { ref } from 'vue'

let skuList = [
    '小果【50mm左右】一斤',
    '中果【55mm左右】一斤',
    '大果【60mm左右】一斤',
    '特大果【65mm+】一斤'
]

defineProps({
    skus: {
        type: Array,
        require: true
    }
})

const emits = defineEmits(['selectSku'])

const skuId = ref('')
const changeSku = (id) => {
    skuId.value= id
    emits('selectSku', id)
}
</script>

<template>
<div class="sku-container">
    <div class="label">规格</div>
    <div class="sku-list">
        <div class="sku-box" 
             v-for="sku in skus"
             :key="sku.id" 
             @click="changeSku(sku.id)"
             :class="{ selected: skuId === sku.id }"
             >
             {{ sku.sku }}
        </div>
    </div>
</div>
</template>

<style scoped lang='scss'>
.sku-container {
    display: flex;
    justify-content: space-between;
    width: 500px;
    max-height: 300px;
    margin-top: 10px;
    padding: 10px;
    // background-color: #f5f5f5;

    .label {
        height: 100%;
        width: 50px;
    }

    .sku-list {
        display: flex;
        flex-wrap: wrap;
        width: 430px;
        
        .sku-box {
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 5px 10px;
            border: 1px solid #e0c6cb;
            font-size: 12px;

            &:hover {
                color: #39bf3e;
                border-color: #39bf3e;
            }
        }

        .selected {
            color: #39bf3e;
            border-color: #39bf3e;
        }
    }
}
</style>
